<template>
  <div>
    <TodoListHeader :TodoLists="TodoLists" @add-todo-list="handleAdd"/>
    <TodoListContent :TodoLists="TodoLists" @delete-todo-list="handleDelete"/>
  </div>

</template>

<script setup>
import TodoListHeader from './components/TodoListHeader.vue';
import TodoListContent from './components/TodoListContent.vue';
import { ref, watch, onMounted } from 'vue'

//总待办事项
const TodoLists = ref([])

//添加数据
const handleAdd = (event) => {
  TodoLists.value.push({text: event, isSucceed: false })
}

//删除数据
const handleDelete = (text) => {
  const index = TodoLists.value.findIndex(item => item.text === text)
  TodoLists.value.splice(index, 1)
}

//监听todolist数组的变化，进行本地存储
watch(TodoLists, () => {
  localStorage.setItem('TodoLists', JSON.stringify(TodoLists.value))
}, { deep: true })

//获取本地存储的数据
onMounted(() => {
  TodoLists.value = JSON.parse(localStorage.getItem('TodoLists') || '[]')
})
</script>

<style lang='scss' scoped></style>